<template>
  <div class="tcp">
    <el-card>
      <div class="add">
        <el-button type="primary" size="small" @click="showDialog(1)">新增</el-button>
      </div>
      <el-table
          :data="portMaps"
          :header-cell-style="{
          background:'#f5f5f6',
          fontWeight: 'bold',
          color:'#000000',
          fontSize:'14px'
        }"
          border>
        <el-table-column
            prop="id"
            align="center"
            label="ID"
            width="200">
        </el-table-column>
        <el-table-column
            align="center"
            prop="clientId"
            label="客户端ID"
            width="200">
        </el-table-column>
        <el-table-column
            align="center"
            prop="name"
            label="名称">
        </el-table-column>
        <el-table-column
            align="center"
            prop="serverPort"
            label="服务端端口"
            width="200">
        </el-table-column>
        <el-table-column
            align="center"
            prop="clientPort"
            label="客户端端口"
            width="200">
        </el-table-column>
        <el-table-column
            label="状态"
            align="center"
            width="130"
        >
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"
                       @change="changeStatus(scope.row.id)"
                       :active-value="1"
                       :inactive-value="0">
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column
            align="center"
            label="操作"
            width="220"
        >
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="danger"
                @click="handleRemove(scope.row.id)"
            >删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
    </el-card>

    <el-dialog
        :title="dialogTitle"
        :visible.sync="dialogVisible">
      <el-card shadow="never">
        <el-form ref="form" :model="portMap" label-width="120px" :rules="rules">
          <!--          <el-input v-model="portMap.clientId" v-show="false"></el-input>-->
          <el-form-item label="客户端" prop="clientId">
            <el-select v-model="portMap.clientId" placeholder="请选择客户端">
              <el-option
                  v-for="item in clients"
                  :key="item.clientId"
                  :label="item.clientName"
                  :value="item.clientId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="portMap.name"></el-input>
          </el-form-item>
          <el-form-item label="服务端端口" prop="serverPort">
            <el-input v-model="portMap.serverPort"></el-input>
          </el-form-item>
          <el-form-item label="客户端端口" prop="clientPort">
            <el-input v-model="portMap.clientPort"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {addPortMap, listPortMap, notifyPortMapStatus, removePortMap} from "@/api/port-map";
import {listClients} from "@/api/client";

export default {
  name: "TCP",
  data() {
    return {
      rules: {},
      dialogTitle: '',
      dialogVisible: false,
      portMap: {},
      portMaps: [],
      clients: []
    }
  },
  created() {
    this.listPortMaps()
  },
  methods: {
    listPortMaps() {
      listPortMap().then(res => {
        this.portMaps = res.data
      })
    },
    handleRemove(id) {
      removePortMap(id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listPortMaps()
        }
      })
    },
    changeStatus(id) {
      notifyPortMapStatus(id).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
        }
      })
    },
    showDialog(tag) {
      if (tag === 1) {
        listClients().then(res => {
          if (res.code === 200) {
            this.clients = res.data
            this.dialogTitle = '新增'
            this.dialogVisible = true
          }
        })
      }
    },
    dialogOk() {
      addPortMap(this.portMap).then(res => {
        if (res.code === 200) {
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.dialogVisible = false
          this.portMap = {}
          this.listPortMaps()
        }
      })
    }
  }
}
</script>

<style lang="scss">
.tcp {
  width: 98%;

  .add {
    margin-bottom: 14px;

    .el-button {
      background: #1ab394;
    }
  }

  .el-dialog {
    width: 32%;

    .el-card__body {
      padding: 10px;
    }
  }
}
</style>
